<template>
  <div class="comment-item-container">
    <van-cell-group>
      <van-cell>
        <van-image
          slot="icon"
          round
          fit="cover"
          class="auth_icon"
          :src="comment.aut_photo"
        />
        <div slot="title" class="bt">
          <div class="name">{{comment.aut_name}}</div>
          <div class="like" @click="onLike">
            <van-icon :name="comment.is_liking ? 'good-job' : 'good-job-o'" />
            <span>{{comment.like_count}}</span>
          </div>
        </div>
        <div slot="label">
          <div class="content">{{comment.content}}</div>
          <div class="db">
            <div class="time">{{comment.pubdate | relativeTime}}</div>
            <van-button
              class="reply"
              round
              size="mini"
              @click="$emit('reply-click', comment)"
            >回复 {{comment.reply_count}}</van-button>
          </div>
        </div>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { addCommentLike, deleteCommentLike } from '../../api/comment'

export default {
  name: 'commentItem',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  methods: {
    async onLike () {
      const commentId = this.comment.com_id.toString()
      if (this.comment.is_liking) {
        await deleteCommentLike(commentId)
        this.comment.like_count--
      } else {
        await addCommentLike(commentId)
        this.comment.like_count++
      }
      // 更新视图
      this.comment.is_liking = !this.comment.is_liking
    }
  }
}
</script>

<style scoped>
.auth_icon {
  height: 36px;
  width: 36px;
  margin-right: 13px;
}
.name {
  font-size: 14px;
  color: #406599;
}
.content {
  font-size: 16px;
  color: #222222;
  margin: 10px 0;
}
.bt {
  display: flex;
  justify-content: space-between;
}
  .db {
    display: flex;
    align-items: center;
  }
  .reply {
    margin-left: 10px;
  }
</style>
